<!-- 校园大使的登录页面 -->
<template>
  <div class="context_box">
    <div class="login_top img">
      <img src="@/assets/img/index_icon1.png" alt />
      <div class="login_top_txt img">
        <img src="@/assets/img/index_icon9.png" alt />
      </div>
    </div>
    <div class="login_middle">
      <div class="login_middle_in">
        <div class="login_middle_in_title">账号</div>
        <div class="login_middle_in_input bm">
          <input type="number" placeholder="请输入手机号" v-model="userdata.mobile"/>
        </div>
      </div>
      <div class="login_middle_in">
        <div class="login_middle_in_title">验证码</div>
        <div class="login_middle_in_input bm cenFlex">
          <div class="login_middle_in_input_l">
            <input type="number" placeholder="请输入验证码" v-model="userdata.code"/>
          </div>
          <div v-show="verShow" class="login_middle_in_input_r cenFlex" @click="verificationcodeClick()">获取验证码</div>
          <div v-show="!verShow"  class="login_middle_in_input_r cenFlex"><span>{{timer}}</span>s</div>
        </div>
      </div>
    </div>
    <div class="all_btn cenFlex btnR login_btn" @click="loginClick()">登录</div>
    <div class="login_tip cenFlex" @click="$router.push('/nice-register')">
      <div class="txt">尚未拥有账号，立即注册</div>
      <div class="icon cenFlex">
        <van-icon name="arrow" />
      </div>
    </div>
    <div class="logo img">
      <img src="@/assets/img/index_icon2.png" alt />
    </div>
  </div>
</template>

<script>
import api from '@/api/login'
import { Toast } from 'vant'
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
  },
  data() {
    //这里存放数据
    return {
      userdata:{
        mobile:'',
        code:''
      },
      timer:60, // 验证码倒计时
      verShow:true,
    };
  },
  //监听属性 类似于data概念
  computed: {

  },
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    loginClick(){
      api.apiLogin(this.userdata).then(res => {
        if(res.code === 0){
          Toast.success(`登录成功~`)
          localStorage.setItem('nice_phone',res.token)
          this.$router.replace('/task-management')
        }else{
          Toast.fail(`${res.msg}`)
        }
      })
    },
    verificationcodeClick(){
      const data = {
        phone: this.userdata.mobile
      }
      api.apiVerificationcode(data).then(res=>{
        if(res.code === 0){
          Toast.success(`已发送`)
          this.verShow = false;
          const auth_timer = setInterval(()=>{
            this.timer--;
            if(this.timer<=0){
              this.verShow = true;
              clearInterval(auth_timer)
            }
          },1000)
        }
      })
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    if(localStorage.getItem('nice_phone')){
      this.$router.replace('/task-management')
    }
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
.login_top {
  width: 100%;
  height: 254.5px;
  background: #f5f5f5;
  position: relative;
  .login_top_txt {
    position: absolute;
    width: 163px;
    animation: leftAnmation 1s linear;
    left: 42px;
    top: 73px;
  }
  @keyframes leftAnmation {
    from {
      transform: translateX(-200%);
      opacity: 0;
    }
    to {
      transform: translateX(0%);
      opacity: 1;
    }
  }
}
.login_middle {
  padding: 20px 30px;
  .login_middle_in {
    padding-top: 10px;
    .login_middle_in_title {
      padding: 20px 0px;
      font-size: 14px;
      font-weight: 600;
    }
    .login_middle_in_input {
      padding-bottom: 8px;
      height: 35px;
      align-items: flex-end;
      .login_middle_in_input_l {
        width: 100%;
        height: 100%;
      }
      .login_middle_in_input_r {
        font-size: 12px;
        color: #333;
        text-align: right;
        border:1px #333 solid;
        border-radius: 5px;
        min-width: 80px;
        height: 26px;
      }
    }
  }
}
.login_btn {
  widows: 100%;
  height: 54px;
  width: 315px;
  margin: 20px auto;
  font-size: 16px;
}
.login_tip {
  font-size: 12px;
  margin-top: 26px;
}
.logo {
  margin: 20px auto;
  margin-top: 60px;
}
</style>
